<!DOCTYPE html>
<html lang="cn">

<head>
    <title>JavaScript Basic Guide</title>
    <meta name="author" content="Vincent Lau">
    <meta name="keywords" content="JavaScript,js">
    <meta name="description" content="JavaScript Basic Guide">
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <meta name="copyright" content="www.godsdebt.com" />

    <!--360浏览器-->
    <meta name="renderer" content="webkit">
    <!--其它双核浏览器-->
    <meta name="force-rendering" content="webkit">
    <!--如果安装了GCF，则使用GCF来渲染页面，如果没有安装GCF，则使用最高版本的IE内核进行渲染。-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <!-- Mobile Specific -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <!-- referrer-policy -->
    <meta name="referrer" content="always">

    <link type="image/x-icon" href="img/favicon.ico" rel="shortcut icon">
    <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,100" />
    <!--
        <link rel="stylesheet" href="plugin/animate/v3.5.2/animate.min.css" />
        <link rel="stylesheet" href="plugin/normalize/v7.0.0/normalize.css" />
        <link rel="stylesheet" href="plugin/vidage/v0.3.5/styles/Vidage.min.css" />
    -->

    <!-- cdnjs加速 -->
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" />
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css" />
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/Vidage/0.3.5/styles/Vidage.min.css" />

    <link rel="stylesheet" href="//unpkg.com/iview/dist/styles/iview.css">
    <!--
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/iview/2.0.0-rc.17/styles/iview.css" />
    -->
    <link rel="stylesheet" href="css/style.css" />
    <link rel="stylesheet" href="css/index.css" />
</head>

<body>
    <div class="Vidage">
        <div class="Vidage__image"></div>
        <video id="VidageVideo" class="Vidage__video" preload="metadata" loop autoplay muted>
            <source src="video/bg.webm" type="video/webm">
            <source src="video/bg.mp4" type="video/mp4">
        </video>
        <div class="Vidage__backdrop"></div>
    </div>

    <div class="container flex" v-cloak>
        <div class="home flex flex-column flex-center" v-bind:class="{ top: current!=1 }">
            <h1 class="title">Vincent Lau</h1>
            <p class="description">Live or Dead, Make a Choice.</p>
        </div>

        <div class="parts flex flex-column flex-center" v-cloak>
            <div class="equal bg-blue" v-show="current==2" v-cloak>
                <h2>Equality in JavaScript: Loose Equality, Strict Equality and IF</h2>
                <div class="flex flex-center">
                    <table class="left" v-show="keys.length">
                        <thead>
                            <tr>
                                <th>EQUAL</th>
                                <th v-for="item in keys"><span class="text-mode-v">{{item}}</span></th>
                                <th>if</th>
                                <th>Boolean()</th>
                                <th>typeof</th>
                                <th>constructor</th>
                                <th>toString</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="item1 in keys">
                                <th>{{item1}}</th>
                                <td v-for="item2 in keys" v-bind:class="'eq'+getEqual(item1,item2)" :title="'('+item1+')'+operation[getEqual(item1,item2)]+'('+item2+')'"></td>
                                <td v-bind:class="'eq'+getIF(item1)" :title="'if('+operation[getIF(item1)]+item1+'){ return true;}'"></td>
                                <td v-bind:class="'eq'+getBoolean(item1)" :title="'if('+operation[getBoolean(item1)]+item1+'){ return true;}'"></td>
                                <td class="scell">{{getTypeof(item1)}}</td>
                                <td class="scell">{{getConstructor(item1)}}</td>
                                <td class="scell">{{getToString(item1)}}</td>
                            </tr>
                        </tbody>
                    </table>
                    <div class="right flex flex-column">
                        <div style="border-bottom: 1px solid #e9e9e9;padding-bottom:6px;margin-bottom:6px;">
                            <Checkbox :indeterminate="indeterminate" :value="checkAll" @click.prevent.native="handleCheckAll">全选</Checkbox>
                        </div>
                        <Checkbox-group v-model="keys" @on-change="checkAllGroupChange" class="flex flex-start">
                            <Checkbox v-for="item in allKey" :label="item"></Checkbox>
                        </Checkbox-group>
                    </div>
                </div>
            </div>
        </div>

        <ul class="menu flex flex-column flex-center">
            <li data-title="Home" @click="current=1" v-bind:class="{ active: current==1 }">Home</li>
            <li data-title="Equal" @click="current=2" v-bind:class="{ active: current==2 }">Equal</li>
            <li data-title="About" @click="setCurrent(3)" v-bind:class="{ active: current==3 }">About</li>
        </ul>
    </div>

    <footer class="flex">
        <div class="main-icon"></div>
        <div class="copyright">
            Copyright ©2018 Vincent Lau | All Rights Reserved.
        </div>
    </footer>

    <!--
        <script src="plugin/vidage/v0.3.5/scripts/Vidage.min.js"></script>
    -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/Vidage/0.3.5/scripts/Vidage.min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>

    <script src="//unpkg.com/iview/dist/iview.min.js"></script>
    <!--
    <script src="//cdnjs.cloudflare.com/ajax/libs/iview/2.0.0-rc.17/iview.min.js"></script>
    <script src="//unpkg.com/vue-router/dist/vue-router.js"></script>
    -->
    <script>
      new Vidage('#VidageVideo')

      /**
      @link https://dorey.github.io/JavaScript-Equality-Table/unified/?reordered
      @link https://dorey.github.io/JavaScript-Equality-Table/unified/
      */
      var equalTable = new Vue({
        el: '.container',
        components: ['Checkbox-group'],
        methods: {
          getEqual (i1, i2) {
            // console.log(i1, i2)
            // 使用eval执行比较，直接value比较会不一样，因为是同一个对象
            // 与{}比较时，{}要在后面，不然会报错[SyntaxError: Unexpected token ===]，一次eval里面比较参数加上[()]
            if (eval('(' + i1 + ')===(' + i2 + ')')) {
              return 2
            }
            if (eval('(' + i1 + ')==(' + i2 + ')')) {
              return 1
            }
            return 0
          },
          getIF (item) {
            if (eval('(' + item + ')')) { // 不简单通过item.value判断，使用eval item.key
              return 4
            }
            return 3
          },
          getBoolean (item) {
            if (eval('Boolean(' + item + ')')) { // 不简单通过item.value判断，使用eval item.key
              return 4
            }
            return 3
          },
          getConstructor (item) {
            try { // null
              return eval('(' + item + ').constructor')
            } catch (e) {
              return 'ERROR'
            }
          },
          getTypeof (item) {
            return eval('typeof ' + item)
          },
          getToString (item) {
            return eval('Object.prototype.toString.call(' + item + ')')
          },

          setCurrent (current) {
            this.current = current
          },

          handleCheckAll () {
            if (this.indeterminate) {
              this.checkAll = false
            } else {
              this.checkAll = !this.checkAll
            }
            this.indeterminate = false

            if (this.checkAll) {
              this.keys = this.allKey
            } else {
              this.keys = []
            }
          },
          checkAllGroupChange (data) {
            if (data.length === 3) {
              this.indeterminate = false
              this.checkAll = true
            } else if (data.length > 0) {
              this.indeterminate = true
              this.checkAll = false
            } else {
              this.indeterminate = false
              this.checkAll = false
            }
          }
        },
        computed: {

        },
        data: { //= =、===、Object.is()
          current: 1, // 1、home 2、equal 3、about
          symbol: ['≠', '=', '≡', 'F', 'T'], // 符号表示
          operation: [' != ', ' == ', ' === ', '! ', ''],
          allKey: ['false', '0', '+0', '-0', '"0"', '""', '" "',
            'true', '1', '"1"', '-1', '"-1"', '[1]', '"true"', '"false"', 'Infinity', '-Infinity', 'null', 'undefined', 'NaN',
            '{}', 'Object()', 'new Object', 'new Object()', 'new Object({})',
            '"\\n"', '"\\r"', '"\\t"', '"\\v"', '"\\f"', '"\\b"',
            '[]', '[0]', '[[]]', '[[0]]', 'new Array()', 'Array()',
            'new String()', 'new String("")', 'String()', 'String("")',
            'new Boolean()', 'Boolean()', 'new Boolean(false)', 'Boolean(false)', 'new Boolean(true)', 'Boolean(true)',
            'function(){}', 'function(a,b){return a+b;}', 'new function(){}', 'new function(a,b){return a+b;}', 'new Function()', 'new Function("a","b","return a+b;")',
            'window', 'navigator',
            'Number', 'String', 'Boolean', 'Object', 'Array', 'Function', 'Date',
            'Math', 'JSON', 'Reflect',
            '(function(){return arguments;})()', 'Error', 'Map', 'Set', 'WeakSet', 'Promise', 'Proxy'
          ],
          keys: ['false', '0', '"0"', '""', '" "', '"\\n"', '[]', '[0]', '[[]]', '[[0]]', 'true', '1', '"1"', '-1', '"-1"', '[1]', '"true"', '"false"', 'Infinity', '-Infinity', 'null', 'undefined', '{}', 'NaN'],
          // Checkbox-group
          indeterminate: true,
          checkAll: false
        }
      })
    </script>
</body>

</html>